<template>
  <view class="my-page">
    <!-- 用户信息区域 -->
    <view class="user-info">
      <view class="user-header">
        <image
          class="avatar"
          src="https://picsum.photos/60/60"
          mode="aspectFill"
        ></image>
        <view class="user-detail">
          <text class="username">Latte今天喝拿铁</text>
          <text class="phone">183****1923</text>
        </view>
      </view>

      <view class="member-card">
        <text class="member-type">会员卡·普通会员</text>
        <text class="member-number">1093586832435</text>
      </view>
    </view>

    <!-- 账户信息 -->
    <view class="account-info">
      <view class="account-item">
        <text class="value">5</text>
        <text class="label">优惠券</text>
      </view>
      <view class="account-item">
        <text class="value">168.30</text>
        <text class="label">余额</text>
      </view>
      <view class="account-item">
        <text class="value">324</text>
        <text class="label">积分</text>
      </view>
    </view>

    <!-- 功能入口 -->
    <view class="function-grid">
      <view class="function-item" v-for="item in functionList" :key="item.text">
        <image class="function-icon" :src="item.icon" mode="aspectFit"></image>
        <text class="function-text">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Mock from "mockjs";
// 当前时间
const currentTime = ref("");

// 功能列表
const functionList = ref([
  { text: "兑换优惠", icon: "" },
  { text: "心意好礼", icon: "" },
  { text: "更换手机", icon: "" },
  { text: "地址管理", icon: "" },
  { text: "开发票", icon: "" },
  { text: "联系客服", icon: "" },
  { text: "资料设置", icon: "" },
]);
functionList.value.forEach((element) => {
  element.icon = Mock.Random.dataImage("60x60", element.text);
});

// 更新时间
const updateTime = () => {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, "0");
  const minutes = now.getMinutes().toString().padStart(2, "0");
  currentTime.value = `${hours}:${minutes}`;
};

onMounted(() => {
  updateTime();
  // 每分钟更新时间
  setInterval(updateTime, 60000);
});
</script>

<style lang="scss">
page {
  height: 100%;
}
.my-page {
  height: 100%;
  padding: 20rpx 30rpx;
  background-color: #f7f7f7;
}

.time-display {
  font-size: 36rpx;
  color: #333;
  text-align: right;
  margin-bottom: 40rpx;
}

.user-info {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-detail {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.phone {
  font-size: 28rpx;
  color: #666;
}

.member-card {
  background-color: #f8f3e6;
  border-radius: 12rpx;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
}

.member-type {
  font-size: 28rpx;
  color: #b38a58;
}

.member-number {
  font-size: 24rpx;
  color: #b38a58;
}

.account-info {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.account-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.label {
  font-size: 24rpx;
  color: #666;
}

.function-grid {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.function-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 15rpx;
}

.function-text {
  font-size: 24rpx;
  color: #333;
}
</style>